import React, { useState } from "react";
import { CloseCircleOutlined } from "@ant-design/icons";
interface Props {
  // Define your props here
  placeholder?: String;
  type?: String;
}

// 自定义钩子
function useInput(initialValue: any) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event: any) => {
    setValue(event.target.value);
  };

  return [value, handleChange];
}

const MyInput: React.FC<Props> = (props: any) => {
  const [inputValue, handleInputChange] = useInput("");
  const inputChange = (e: any) => {
    if (e.target.value) {
      e.target.classList.add("active");
    } else {
      e.target.classList.remove("active");
    }
  };
  const clearValue = (e: any) => {
    //更改inputValue的值
    handleInputChange({ target: { value: "" } });
    e.currentTarget.parentElement.firstChild.value = "";
    inputChange({ target: e.currentTarget.parentElement.firstChild });
  };
  return (
    <div className="input-item">
      <input
        onInput={inputChange}
        type={props.type}
        value={inputValue}
        onChange={handleInputChange}
      />
      <span className="close" onClick={clearValue}>
        <CloseCircleOutlined />
      </span>
      <div className="placeholder">{props.placeholder}</div>
    </div>
  );
};

export default MyInput;
